<template>
	<div>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-icon mui-icon-left-nav mui-pull-left callback-his" @click="goBack()"></a>
			<h1 class="mui-title">家庭保障方案</h1>
		</header>
		<div class="mui-content">
			<div class="mui-table-view none-maring-top">
				<template v-for="(item,$index) in list">
					<li class="mui-table-view-cell">
						<img src="../../../../static/banner.jpg" class="mui-media-object mui-pull-left news-img">
						<div class="mui-media-body news-info">
							<p class="news-info-title">{{item.members[0].clientName}}</p>
							<p class="count-items">
								<div class="items-tyoes">
									<div class="dot-span"></div><span style="margin-right: 10px;">{{item.members.length}}受保人</span>
									<template v-if="item.SAVING !=0">
										<div class="dot-span"></div> <span style="margin-right: 10px;">{{item.SAVING}}款储蓄险</span>
									</template>
									<template v-if="item.MEDICAL != 0">
										<div class="dot-span"></div><span style="margin-right: 10px;">{{item.MEDICAL}}款医疗险</span>
									</template>
									<template v-if="item.HEAVY_RISK != 0">
										<div class="dot-span"></div><span style="margin-right: 10px;">{{item.HEAVY_RISK}}款重疾险</span>
									</template>
									<template v-if="item.LIFE != 0">
										<div class="dot-span"></div><span style="margin-right: 10px;">{{item.LIFE}}款人寿险</span>
									</template>
									
								</div>
								
							</p>
							<p class="news-times">{{item.updateTime|getday}}</p>
						</div>
					</li>
				</template>
				
			</div>
			<router-link :to="{name:'CreatePlan'}">
				<page-add-temp></page-add-temp>
			</router-link>
		</div>
	</div>
</template>
<script>
	import {api} from '../../../gloabl/api.js'
	import {getCookie,getTimeDay} from '../../../gloabl/common.js'
	import AddTemplate from '../../../components/tool/addTemplte.vue'
	export default{
		data:function(){
			return{
				img_path:url.img_path,
				list:[],
			}
		},
		components:{
			'page-add-temp':AddTemplate
		},
		
		mounted:function(){
			let id = JSON.parse(getCookie('user_info')).sid;
			let me = this;
			let query = '{'+api.listUserFamilyPlan('"'+id+'"')+'}';
			mui.showLoading("正在加载..","div");//遮罩层
			me.$http.post(url.graphql,{query:query}).then((res)=>{
				mui.hideLoading();
				let data = res.data.data.listUserFamilyPlan;
				me.HandleData(data);
			}).catch(function (error) {
				mui.alert('请求超时')
			})
		},
		methods:{
			HandleData(data){
				for (let i = 0; i < data.length; i++) {
					let zj = 0;let qj = 0; let rs = 0; let cx=0;let yl = 0;
					for(let j = 0;j<data[i].members.length;j++){
						for(let k = 0;k<data[i].members[j].adviceDetailList.length;k++){
							let temp = data[i].members[j].adviceDetailList[k];
							if(temp.product.category == 'SAVING'){
								cx = cx +1;
							}
							if(temp.product.category == 'MEDICAL'){
								yl = yl +1;
							}
							if(temp.product.category == 'HEAVY_RISK'){
								zj = zj +1;
							}
							if(temp.product.category == 'LIFE'){
								rs = rs +1;
							}
						}
					}
					data[i]['SAVING'] = cx;data[i]['MEDICAL'] = yl;
					data[i]['HEAVY_RISK'] = zj;data[i]['LIFE'] = rs;
				}
				this.list = data;
			}
		},
		filters:{
			getday(val){
				return getTimeDay(val);
			}
		}
	}
</script>
<style scoped="scoped">
	.items-tyoes{
		padding-right: 10px;
		width: 100%;
	}
	.dot-span{
		width: 5px;
		height: 5px;
		border-radius: 50%;
		background-color: #F08800;
		display: inline-table;
		margin-right: 3px;
		
	}
	.count-items{
		font-size: 12px;
		color: #666666;
	}
	.news-info-title{
		color: #333333;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		font-size: 14px;
		text-align: left;
		font-weight: 600;
	}
	.news-info{
		text-align: left;
		height: 82px;
		position: relative;
	}
	.news-times{
		position: absolute;
		bottom: 0;
		left: 0;
		font-size: 11px;
		color: #999999;
	}
	.news-img{
		height: 82px;
		width: 109px;
		max-width: 109px;
		border-radius: 2px;
	}
</style>